<template>
    <div class="content">
        <el-dialog :title="this.isAdd? '新增数据源' : '编辑数据源'" :close-on-click-modal="false" :visible.sync="visible" width="30%">
            <el-form ref="form" :model="form" label-width="auto" class="demo-ruleForm">
                <el-form-item label="命名空间">
                    <el-input v-model="form.ns" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="数据源">
                    <el-input v-model.trim="form.ds" :disabled="!isAdd"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型" prop="region">
                    <el-select v-model="form.dbType" clearable placeholder="请选择数据库类型">
                        <el-option v-for="(item,index) in dbTypes" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主机地址">
                    <el-input v-model.trim="form.host"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model.number="form.port"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model.trim="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model.trim="form.password"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称">
                    <el-input v-model.trim="form.dbName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="dialog = true">连接池配置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" @click="handleTestConnection">测试连接</el-button>
                    <el-button icon="el-icon-circle-plus" @click="handleSumbit">提交</el-button>
                    <el-button icon="el-icon-error" @click="visible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-drawer title="连接池配置" :visible.sync="dialog" direction="rtl" size="35%" custom-class="demo-drawer" ref="drawer">
                <el-form :model="form" label-position="right" label-width="200px">
                    <el-form-item label="连接超时(ms)">
                        <el-input v-model.number="form.connectionTimeout"></el-input>
                    </el-form-item>
                    <el-form-item label="连接空闲超时(ms)">
                        <el-input v-model.number="form.idleTimeout"></el-input>
                    </el-form-item>
                    <el-form-item label="连接最大生命时间(ms)">
                        <el-input v-model.number="form.maxLifetime"></el-input>
                    </el-form-item>
                    <el-form-item label="连接占用超时(ms)">
                        <el-input v-model.number="form.leakDetectionThreshold"></el-input>
                    </el-form-item>
                    <el-form-item label="最小空闲连接数(个)">
                        <el-input v-model.number="form.minIdle"></el-input>
                    </el-form-item>
                    <el-form-item label="最大连接数(个)">
                        <el-input v-model.number="form.maxPoolSize"></el-input>
                    </el-form-item>
                    <el-form-item label="连接验证超时(ms)">
                        <el-input v-model.number="form.validationTimeout"></el-input>
                    </el-form-item>
                    <el-form-item label="连接测试查询">
                        <el-input v-model.trim="form.connectionTestQuery"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleConfrimForm">确 定</el-button>
                        <el-button @click="handleCancelForm">取 消</el-button>
                    </el-form-item>
                </el-form>
        </el-drawer>
    </div>
</template>
<script>
    import { dsAdd, dsUpdate, dsInfo, dsTestConnection } from '../../api/ds'
    import { dbConfigList } from '../../api/db'
    export default {
        mounted(){
            dbConfigList().then(res => {
                this.dbTypes = res.data
            })
        },
        data() {
            return {
                dialog: false,
                isAdd: false,
                visible: false,
                form: {
                    ns: 'public',
                    ds: '',
                    dbType: 'MYSQL',
                    host: 'localhost',
                    port: 3306,
                    username: 'root',
                    password: '',
                    dbName: '',
                    connectionTimeout: 30000,
                    idleTimeout: 600000,
                    maxLifetime: 1800000,
                    leakDetectionThreshold: 0,
                    minIdle: 10,
                    maxPoolSize: 10,
                    validationTimeout: 5000,
                    connectionTestQuery: "SELECT 1"
                },
                dbTypes: []
            }
        },
        methods: {
            init(isAdd, ns, ds) {
                this.form = {
                    ns: 'public',
                    ds: '',
                    dbType: 'MYSQL',
                    host: 'localhost',
                    port: 3306,
                    username: 'root',
                    password: '',
                    dbName: '',
                    connectionTimeout: 30000,
                    idleTimeout: 600000,
                    maxLifetime: 1800000,
                    leakDetectionThreshold: 0,
                    minIdle: 10,
                    maxPoolSize: 10,
                    validationTimeout: 5000,
                    connectionTestQuery: "SELECT 1"
                }
                this.form.ns = ns || 'public'
                this.form.ds = ds || ''
                this.isAdd = isAdd
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields()
                    if (!this.isAdd) {
                        dsInfo(this.form.ns, this.form.ds).then(res => {
                            this.form = res.data
                        })
                    }
                })
            },
            handleSumbit() {
                if (this.isAdd) {
                    dsAdd(this.form).then((res) => {
                        this.$message({
                            message: '新增成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                } else {
                    dsUpdate(this.form).then(res => {
                        this.$message({
                            message: '更新成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                }
            },
            handleTestConnection() {
                dsTestConnection(this.form).then((res) => {
                    this.$message({ message: '连接成功！', type: 'success' })
                })
            },
            handleCancelForm() {
                this.dialog = false;
            },
            handleConfrimForm() {
                this.dialog = false;
            }
        }
    }
</script>
<style scoped>
.content {
    margin: 20px 0px;
    font-size: 1em;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}
</style>
